Expander Control in WPF

In WPF XAML <Expander /> element is used to create an expander control. Expander control is basically used for wrapping and expanding the content of items. You may have notice some websites provides a functionality to close and open controls. In this demonstration we learn that how to use expander control in WPF.

A XAML code snippets which represent use of expander control

<Expander x:Name="expainder1" Background="#ccffff" Header="Expainder Control Demo" ExpandDirection="Down" IsExpanded="True" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Expander x:Name="expander1" Header="Employee Personal Information" Grid.Row="0" Grid.Column="0">
                    <Label x:Name="lblMessage1" Content="Employee Personal Details" />
                </Expander>
                <Expander x:Name="expander2" Header="Student Personal Information" Grid.Column="0" Grid.Row="1">
                    <Label x:Name="lblMessage2" Content="Student Personal Details" />
                </Expander>
            </Grid>
</Expander>